<template>
<div>
    <el-card class="box-card">
        <template #header>
            <div class="title">趋势：默认上升图标颜色 #f5222d，下降图标颜色 #52c41a</div>
        </template>
        <div class="trend">
            <div class="mr-2">
                <m-trend text="利润率"></m-trend>
            </div>
            <div>
                <m-trend text="亏损率" type="down"></m-trend>
            </div>
        </div>
    </el-card>
    <el-card class="box-card">
        <template #header>
                <div class="title">自定义图标：</div>
        </template>
        <div class="trend">
            <div class="mr-2">
                <m-trend text="利润率" upIcon="CaretTop"></m-trend>
            </div>
            <div>
                <m-trend text="亏损率" type="down" downIcon="CaretBottom"></m-trend>
            </div>
        </div>
    </el-card>
    <el-card class="box-card">
        <template #header>
                <div class="title">自定义图标颜色和字体颜色：</div>
        </template>
        <div class="trend">
            <div class="mr-2">
                <m-trend text="利润率" upIcon="CaretTop" upIconColor="#EA7CCC" upTextColor="#EA7CCC"></m-trend>
            </div>
            <div>
                <m-trend text="亏损率" type="down" downIcon="CaretBottom" downTextColor="#FFC542" downIconColor="#FFC542"></m-trend>
            </div>
        </div>
    </el-card>
    
</div>
    
</template>

<script lang='ts' setup>
</script>
<style lang="scss" scoped>

.title{
    padding: 10px 0;
    font-size: 13px;
    color: #333;
}
.trend{
    margin-bottom: 30px;
    display: flex;
    align-items: center;  
}
.mr-2{
    margin-right: 20px;
}
</style>